<script>
  import affiche from '../children/affiche'
  import trendChart from '../children/trendChart'
  import Constant from 'common/constant'
  import TeamHeader from '../TeamHeader'
  import RemoteDAO from 'common/remoteDAO'

  export default {
    data () {
      return {
        gameId: this.$route.query.gameId || '',
        afficheData: [
          '1111111111比赛采用团队对战模式，以每个团队的平均收',
          // '2222222222比赛采用团队对战模式，以每个团队的平均收',
        ],
        teamChartList: [],
        chartData: [],
        chartDateArr: [],

        twainData: [{
          name: '广东师范 大学凤雏队',
          num: '9,000',
          profit: '+1.23%'
        },{
          name: '广东财经 大学龙虎队',
          num: '9,000',
          profit: '-0.67%'
        }],
        rank: 1,
        // 比赛详情
        gameDetail: {},
        // 比赛头
        gameTitle: this.$route.query.gameName
      }
    },

    components: {
      affiche,
      trendChart,
      TeamHeader
    },

    mounted () {
      this.getAnnouncement()
      this.getGameDetail()
      this.getGameTeams()
    },

    computed: {
      timeZone () {
        return this.filterTime(this.gameDetail.BEGIN_DATE, 'MM月DD日') 
          + '-' + this.filterTime(this.gameDetail.END_DATE, 'MM月DD日')
      },

      teamList () {
        return this.$store.state.team.teamList
      },

      announcementList () {
        return this.$store.state.team.announcementList
      },
      
      gameStatus () {
        const gameStepMap = {
          '0': '未开始报名',
          '1': '报名中',
          '2': '报名结束',
          '3': '比赛中',
          '4': '比赛结束'
        }
        
        return gameStepMap[this.gameDetail.GAME_STEP] || '比赛关闭'
      }
    },

    methods: {
      goRoute () {
        this.$router.push({name: 'Announcement'})
      },

      trophyClass (rank) {
        return rank < 4 ? 'icon-trophy-' + rank : 'icon-trophy-u'
      },

      resultClass(bool) {
        return bool ? 'icon-v' : 'icon-loss'
      },

      profitColor (profit) {
        return (profit + '').includes('+')
          ? '#FF3333' : '#89CD4C'
      },

      /**日期格式转换 
      * @param {String} date 输入日期，格式YYYYMMDD
      * @param {String} format 默认：'MM月DD日'，可选 'MM月DD日'、'YYYY.MM.DD'
      */
      filterTime (date, format) {
        let result = ''
        if (date) {
          let year = ''
          let month = ''
          let day = ''
          switch(format) {
            case 'MM月DD日':
              month = date.slice(4, 6)
              day = date.slice(6, 8)
              result = `${month}月${day}日`
              break
            case 'YYYY.MM.DD':
              year = date.slice(0, 4)
              month = date.slice(4, 6)
              day = date.slice(6, 8)
              result = `${year}.${month}.${day}`
              break
            default:
              month = date.slice(4, 6)
              day = date.slice(6, 8)
              result = `${month}月${day}日`
              break
          }
        }
        return result
      },

      toTeamDetail (item) {
        this.$router.push({ path: 'team-detail', query: {
          gameId: item.GAME_ID,
          gameTitle: this.gameTitle
        }})
      },

      // 获取比赛详情
      getGameDetail () {
        RemoteDAO.callUC12008302({
          gameId: this.gameId,
          pageNum: '1',
          pageSize: '50'
        }, res => {
          this.gameDetail = res.data.body[0]
          console.info('game detail', this.gameDetail)
        })
      },

      // 获取比赛团队列表
      getGameTeams () {
        RemoteDAO.callUC12008302({
          gameId: '',
          gameStatus: '',
          pageSize: '50',
          pageNum: '1',
          upGameId: this.gameId
        }, res => {
          this.$store.dispatch('setTeamList', res.data.body.slice(1))
        })
      },

      // 获取公告
      getAnnouncement () {
        RemoteDAO.callUC12000054({
          relationId: '123'
        }, resp => {
          console.info('Announcement List',  resp.data.body)
          this.$store.dispatch('setAnnouncementList', resp.data.body)
        })
      },

      updateChart (chartInstance, chartDateArr, chartData) {
        chartInstance.updateOpt(chartDateArr, chartData)
      },

      // 获取折线图数据
      getChartData () {
        return new Promise((resolve, reject) => {
          const apiAddress = 'http://10.176.118.55:1038/gt/nrng'
          $.ajax({
            method: 'GET',
            url: `${apiAddress}/getNrngSubteamList/${this.gameId}/1/50`,
            dataType: 'JSONP',
            jsonpCallback: 'success',
            success: resp => {
              const { teamList = [] } = resp.data
              console.info('teamList', teamList)
              let teamChartList = teamList.map(e => {
                return JSON.parse(e)
              })
              //chart数据，输出格式[name: Sring, data: Array]
              let chartData = teamChartList.map(e => {
                return {
                  name: e.gameName,
                  data: e.avgProfitTrend.split(',')
                } 
              })
              //chart日期数组
              let chartDateArr = teamChartList[0].avgProfitDays
                              .split(',')
                              .map(e => {
                                return this.filterTime(e, 'YYYY.MM.DD')
                              })

              resolve({chartDateArr, chartData})
            },
            error: err => {
              console.error(err)
              reject(err)
            }
          })
				})
      }
    }
  }
</script>